<template>
  <div class="agent_list">
    <div class="agent_info">
      <div>
        <label for="agent_id">代理ID：</label>
        <input id="agent_id" type="text" v-model="agentId">
      </div>
      <div>
        <label for="agent_phone">手机号码：</label>
        <input id="agent_name" type="text" v-model="agentPhone">
      </div>
      <div>
        <label for="agent_name">代理昵称：</label>
        <input id="agent_name" type="text" v-model="agentName">
      </div>
      <agent-button @btnClick="searchClick">查询</agent-button>
    </div>
    <table-view-with-title link :titles="titles" :dataSource="lists" @next="changePageClick(data)" @previous="changePageClick(data)" :maxPage="maxPage"></table-view-with-title>
  </div>
</template>

<script>
import TableViewWithTitle from "../../../components/common/TableViewWithTitle.vue";
import AgentButton from "../../../components/common/AgentButton.vue";
export default {
  data() {
    return {
      agentId: "",
      agentPhone: "",
      agentName: "",
      maxPage: 1,
      titles: [
        {
          key: "user_id",
          value: "代理ID"
        },
        {
          key: "nickname",
          value: "代理名称"
        },
        {
          key: "mobile",
          value: "手机"
        },
        {
          key: "cardnum",
          value: "卡数"
        }
      ],
      lists: []
    };
  },
  components: {
    TableViewWithTitle,
    AgentButton
  },
  created() {
    this.fetchList();
  },
  methods: {
    fetchList(currentPage = 1) {
      this.apiService.agent
        .agentlist({
          agentid: this.agentId,
          mobile: this.agentPhone,
          nickname: this.agentName,
          pagesize: 10,
          currentpage: currentPage
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.lists = res.data.agentlist;
          this.lists.map(item => {
            item.cardnum = item.cardnum + "张";
          });
        });
    },
    searchClick() {
      this.fetchList();
    },
    changePageClick(data) {
      this.fetchList(data);
    }
  }
};
</script>

<style scoped>
.agent_list {
  text-align: center;
}
.agent_info {
  background-color: #fff;
  padding: 0.25rem 0;
  margin-bottom: 0.3rem;
}
.agent_info div {
  margin: 0.25rem 0;
}
.agent_info div label,
.agent_info div input {
  font-size: 0.32rem;
}
.agent_info div label {
  color: #555;
  display: inline-block;
  width: 2rem;
  text-align: right;
}
.agent_info div input {
  border: 1px solid #d7d7d7;
  border-radius: 0.1rem;
  font-size: 0.32rem;
  text-align: center;
  height: 0.56rem;
  width: 3.87rem;
}
</style>


